.wrapper {
  position: relative;
  z-index: 4;
  padding-left: calc(var(--mantine-spacing-xl) * 2);
  padding-right: calc(var(--mantine-spacing-xl) * 2);

  @mixin light {
    background-color: var(--mantine-color-gray-0);
  }

  @mixin dark {
    background-color: var(--mantine-color-dark-8);
  }

  @media (max-width: $docs-mdx-breakpoint) {
    padding-left: var(--mantine-spacing-xl);
    padding-right: var(--mantine-spacing-xl);
  }
}

.header {
  padding-top: var(--mantine-spacing-xl);
  max-width: 1082px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: calc(var(--mantine-spacing-xl) * 1.5);

  &[data-with-tabs] {
    padding-bottom: calc(var(--mantine-spacing-xl) * 1.5);
  }

  @media (max-width: $docs-mdx-breakpoint) {
    max-width: 100%;
    padding-bottom: var(--mantine-spacing-xl);
  }
}

.title {
  font-size: 44px;
  margin-bottom: 5px;
  font-weight: 900;
  font-family: var(--docs-font-primary);

  @media (max-width: $docs-mdx-breakpoint) {
    font-size: 32px;
  }

  @mixin light {
    color: var(--mantine-color-black);
  }

  @mixin dark {
    color: var(--mantine-color-white);
  }
}

.description {
  max-width: 450px;
  margin-bottom: var(--mantine-spacing-xl);
  font-size: var(--mantine-font-size-lg);

  @media (max-width: $docs-mdx-breakpoint) {
    font-size: var(--mantine-font-size-md);
  }

  @mixin light {
    color: var(--mantine-color-gray-6);
  }

  @mixin dark {
    color: var(--mantine-color-dark-1);
  }
}
